<template>
	<div class="redBag">
		<div class="breadcrumbDiv">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{path: '/home'}">主页</el-breadcrumb-item>
				<el-breadcrumb-item>红包管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--	搜索框	-->
		<div class="content">
			<div class="redBag-search">
				<el-form ref="form" :inline="true" :model="searchform" label-width="80px" size="medium">
					<el-form-item label="用户等级">
						<el-input v-model="searchform.available_level"></el-input>
					</el-form-item>
					<el-form-item label="红包金额">
						<el-input v-model="searchform.face_value"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchSubmit"><i class="el-icon-search"></i> 搜索</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="redBag-buttons">
				<!--批量删除 -->
				<div>
					<el-button type="primary" size="medium" @click="addRedBag"><i class="el-icon-plus"></i> 增加</el-button>
				</div>
				<div class="del-button-div">
					<el-button type="danger" size="medium" :disabled="delButton" @click="delselect"><i class="el-icon-delete"></i>
						批量删除</el-button>
				</div>
			</div>
			<!-- 菜品表格 -->
			<div class="redBag-table">
				<el-table :data="tableData" style="width: 100%" @selection-change="searchChange">
					<el-table-column type="selection" width="55px" align="center">
					</el-table-column>
					<el-table-column prop="red_bag_id" label="ID" width="80px" sortable>
					</el-table-column>
					<el-table-column prop="face_value" label="红包金额" sortable>
					</el-table-column>
					<el-table-column prop="create_time" label="创建时间" width="180px" sortable>
					</el-table-column>
					<el-table-column prop="valid_time" label="期限/天" sortable>
					</el-table-column>
					<el-table-column prop="dead_time" label="过期时间" width="180px" sortable>
					</el-table-column>
					<el-table-column prop="user_level" label="使用限制" sortable>
					</el-table-column>
					<el-table-column prop="available_level" label="用户等级" sortable>
					</el-table-column>
					<el-table-column prop="red_bag_content" label="描述">
					</el-table-column>
					<el-table-column label="操作" width="130" align="center">
						<template slot-scope="scope">
							<el-button @click="editClick(scope.row)" type="text"><i class="el-icon-edit"></i> 编辑</el-button>
							<el-button @click="delClick(scope.row)" type="text"><i class="el-icon-delete"></i> 删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页相关 -->
			<div class="redBag-page">
				<div class="block">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
					 :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
		<!-- 红包增加与编辑 -->
		<div>
			<el-dialog :title="title" v-dialogDrag :visible.sync="dialogFormVisible" width="600px" center>
				<el-form :model="formRedBag" :rules="rules" ref="ruleForm" label-width="120px" size="medium" label-position="left">
					<el-form-item label="红包金额" prop="face_value">
						<el-input v-model="formRedBag.face_value" style="width:200px"></el-input>
					</el-form-item>
					<el-form-item label="有效时间/天" prop="valid_time">
						<el-input v-model="formRedBag.valid_time" style="width:200px"></el-input>
					</el-form-item>
					<el-form-item label="使用额度限制" prop="user_level">
						<el-input v-model="formRedBag.user_level" style="width:200px"></el-input>
					</el-form-item>
					<el-form-item label="最低领取等级" prop="available_level">
						<el-input v-model="formRedBag.available_level" style="width:200px"></el-input>
					</el-form-item>
					<el-form-item label="红包描述" prop="red_bag_content">
						<el-input type="textarea" v-model="formRedBag.red_bag_content" style="width:350px"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="confirmBtnClick('ruleForm')">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import RedBagService from './RedBagService.js';
	import tools from '@/utils/tools.js';
	export default {
		name: "RedBag",
		data() {
			return {
				searchform: {
					available_level: null,
					face_value: null,
				},
				
				//分页
				pageNum: 1,
				pageSize: 5,
				tableData: [],
				total: 50,
				//弹框
				adddialogVisible: false,
				editdialogVisible: false,

				delButton: true,

				title: '',
				rules: {

				},
				dialogFormVisible: false,
				formRedBag: {
					create_time: '',
					dead_time: '',
					valid_time: null,
					red_bag_content: '',
					face_value: null,
					user_level: null,
					available_level: null
				},
				open: 0, //判断是红包增加按钮还是修按钮点击，0是增加，1是修改
			}
		},
		created() {
			this.getPage(this.pageNum,this.pageSize);
		},
		methods: {
			//提交搜索表单
			searchSubmit() {
				this.pageNum = 1;
				this.getPage(this.pageNum,this.pageSize);
			},
			//增加红包
			addRedBag() {
				this.title = '增加红包';
				this.open = 0;
				this.dialogFormVisible = true;

				this.formRedBag.create_time = '';
				this.formRedBag.dead_time = '';
				this.formRedBag.valid_time = null;
				this.formRedBag.red_bag_content = '';
				this.formRedBag.face_value = null;
				this.formRedBag.user_level = null;
				this.formRedBag.available_level = null;
			},
			//批量删除
			delselect() {

			},
			//编辑
			editClick(row) {
				this.title = '编辑红包';
				this.open = 1;
				this.dialogFormVisible = true;

				this.formRedBag.create_time = row.create_time;
				this.formRedBag.dead_time = row.dead_time;
				this.formRedBag.valid_time = row.valid_time;
				this.formRedBag.red_bag_content = row.red_bag_content;
				this.formRedBag.face_value = row.face_value;
				this.formRedBag.user_level = row.user_level;
				this.formRedBag.available_level = row.available_level;
			},
			//单删
			delClick(row) {

			},
			//每页大小改变
			handleSizeChange(val) {
				this.pageSize = val;
				this.getPage(this.pageNum,this.pageSize);
			},
			//当前页码改变
			handleCurrentChange(val) {
				this.pageNum = val;
				this.getPage(this.pageNum,this.pageSize);
			},
			getPage(pageNum,pageSize) {
				RedBagService.searchWithPageService(this.searchform,{
						pageNum: pageNum,
						pageSize: pageSize
					}, res => {
					console.log(res);
					this.tableData = res.allByPage.list;
					this.total = res.allByPage.total;
				})
			},
			//表格选择改变回调
			searchChange(select) {
				this.delButton = select.length == 0;
			},
			//提交添加表单
			confirmBtnClick(addfrom) {
				this.$refs[addfrom].validate((valid) => {
					if (valid) {
						let myDate = new Date();
						let create_time = tools.dateFtt("yyyy-MM-dd hh:mm:ss", myDate);
						//当前时间加上过期天数
						myDate.setDate(myDate.getDate()+parseInt(this.formRedBag.valid_time));
						let dead_time = tools.dateFtt("yyyy-MM-dd hh:mm:ss", myDate);
						this.formRedBag.create_time = create_time;
						this.formRedBag.dead_time = dead_time;
						RedBagService.addredbagService(this.formRedBag,res=>{
							this.getPage(this.pageNum, this.pageSize);
							this.$message({
								type: 'success',
								message: '添加成功'
							});
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
				this.dialogFormVisible = false;
			}

		}
	}
</script>

<style scoped lang="less">
	@import '../../style/Common.less';

	.redBag {}

	.redBag-content {}

	.redBag-search {
		color: #606266;
		font-weight: bold;
	}

	.redBag-buttons {
		display: flex;

		.del-button-div,
		.redBag-state {
			margin: 0 12px 20px 12px;
		}

		.redBag-state {
			margin-left: auto;
		}
	}

	.redBag-table {}

	.redBag-page {
		height: 32px;
		margin: 20px 20px 0 0;
		float: right;
	}

	.redBag-add-dialog {
		.redBag-add {
			padding: 0 20px;
		}
	}
</style>
